<template>
    <div>
          <!-- 用户列表组件  面包些导航 -->
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/welcome' }">后台首页</el-breadcrumb-item>
            <el-breadcrumb-item >权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>权限列表</el-breadcrumb-item>
         
          </el-breadcrumb>
<el-card>
  <el-row>
    <el-col>
      <el-button type="primary" @click=showAddCateDialog >添加分类</el-button>
    </el-col>
  </el-row>

 <!-- 表格 -->
 <tree-table class="treeTable" :data="catelist" :columns="columns" :selection-type="false" :expand-type="false" show-index index-text="编号" border :show-row-hover="false">
<!-- <template slot='isok' v-slot="scope"> -->
  <!-- 第一个模板是 是否有效 -->
  <template v-slot:isok="scope">
            <i
              class="el-icon-success"
              v-if="scope.row.cat_deleted === false"
              style="color: lightgreen"
            ></i>
            <i class="el-icon-error" style="color: red" v-else></i>
          </template >


          <!-- 排序 -->
          <template v-slot:order="scope">
         <el-tag sizi="mini" v-if="scope.row.cat_level===0">一级</el-tag>
         <el-tag type="success" sizi="mini" v-else-if="scope.row.cat_level===1">二级</el-tag>
         <el-tag type="warning" sizi="mini" v-else>三级</el-tag>
          </template>

<!-- 操作 -->
<template slot='opt' slot-scope="scope">
  <el-button type="primary" icon="el-icon-edit" sizi="mini"  circle>编辑</el-button>
  <el-button type="danger" icon="el-icon-delete"   sizi="mini"circle>删除</el-button>
          </template>
</tree-table>


<!-- 分页区域 -->
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="querInfo.pagenum" :page-sizes="[1, 3, 7, 10]" :page-size="querInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</el-card>
<!-- 添加分类的对话框 -->

<el-dialog title="添加分类" :visible.sync="addCateDialogVisible" width="50%" @close="addCateDialogClosed">

    <el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px">
        <el-form-item label="分类名称" prop="cat_name">
            <el-input v-model="addCateForm.cat_name"></el-input>
            <!-- 这里是双向绑定 绑定上面的添加数据表单对象 -->
        </el-form-item>

        <!-- 父级分类框 -->
        <!-- options 用来指定数据源 -->
        <!-- props 用来指定配置对象 -->
        <el-form-item label="父级分类：">
            <el-cascader v-model="selectdKeys" :options="parentCateList" :props="{ expandTrigger: 'hover', ...cascaderProps}" @change="parentCateChanged" clearable></el-cascader>
        </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
    <el-button @click="addCateDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addCate">确 定</el-button>
  </span>
</el-dialog>
</div>
</template>


<script>
    export default {
        data() {
            return {
                //查询条件
                querInfo: {
                    type: 3,
                    pagenum: 1,
                    pagesize: 5
                },
                // 商品分类的数据列表，默认为空
                catelist: [],
                // 总数据条数
                total: 0,

                // 为table指定列的定义
                columns: [{
                    label: '分类名称',
                    prop: 'cat_name'
                }, {
                    label: '是否有效',
                    // 表示,将当前列定义为模板列
                    type: 'template',
                    // 表示当前这一列使用模板名称
                    template: 'isok'
                }, {
                    label: '排序',
                    // 表示,将当前列定义为模板列
                    type: 'template',
                    // 表示当前这一列使用模板名称
                    template: 'order'
                }, {
                    label: '操作',
                    // 表示,将当前列定义为模板列
                    type: 'template',
                    // 表示当前这一列使用模板名称
                    template: 'opt'
                }], //控制添加分类对话框的显示与隐藏 }
                addCateDialogVisible: false //添加分类的表单数据对象
                    ,
                addCateForm: {
                    //将要添加的·分类的名称

                    //富集分类的id 不能为空 接口文档里的响应参数
                    cat_pid: 0,
                    cat_name: '',
                    cat_level: 0,
                }, //添加分类表单的验证规则对象
                addCateFormRules: {
                    cat_name: [{
                        required: true,
                        message: '请输入分类名称',
                        trigger: 'blur'
                    }]
                },
                //父级分类的列表
                parentCateList: [],
                //制定级联选择器的配置对象
                cascaderProps: {
                    value: 'cat_id',
                    lable: 'cat_name',
                    children: 'children'
                }, //选中的父级分类的id数组
                selectdKeys: []
            }
        },
        created() {
            this.getCateList()
        },
        methods: {
            // 获取商品分类数据
            async getCateList() {
                const {
                    data: res
                } = await this.$http.get('categories', {
                    params: this.querInfo
                })

                if (res.meta.status !== 200) {
                    return this.$message.error('获取商品分类失败！')
                }

                console.log(res.data)
                    // 把数据列表，赋值给 catelist
                this.catelist = res.data.result
                    // 为总数据条数赋值
                this.total = res.data.total
            }, //监听pagesize改变
            handleSizeChange(newSize) {
                this.querInfo.pagesize = newSize
                this.getCateList()
            },
            //监听pagenum改变
            handleCurrentChange(newPage) {
                this.querInfo.pagenum = newPage
                this.getCateList()
            }, //添加分类弹出对话框按钮
            showAddCateDialog() {
                //先获取父级分类的数据列表
                this.getParentCateList()
                    //再展示出对话框
                this.addCateDialogVisible = true
            }, //获取父级分类的数据列表  type写2看文档 =最多获取两个档
            async getParentCateList() {
                const {
                    data: res
                } = await this.$http.get('categories', {
                    params: {
                        type: 2
                    }
                })
                if (res.meta.status !== 200) {
                    return this.$message.error('获取父级分类数据失败!')
                }
                // console.log(res.data)
                this.parentCateList = res.data
            },
            //选择性发生编号触发这个函数
            parentCateChanged() {
                console.log(this.selectdKeys);
                //只要选中项发生变化   如果selectdKeys中的length大于0证明选中了父级分类
                //反之没有选到
                //下面是父级分类的id变化
                if (this.selectdKeys.length > 0) {
                    this.addCateForm.cat_pid = this.selectdKeys[
                            this.selectdKeys.length - 1]
                        //为当前分类的等级赋值
                    this.addCateForm.cat_level = this.selectdKeys.length
                    return
                } else {
                    //父级分类的id
                    this.addCateForm.cat_pid = 0
                        //为当前分类的等级赋值
                    this.addCateForm.cat_level = 0
                }
            },
            addCate() {
                // 点击确定按钮添加新的分类
                // console.log(this.addCateForm);
                this.$refs.addCateFormRef.validate(async valid => {
                    if (!valid) return
                    const {
                        data: res
                    } = await this.$http.post('categories', this.addCateForm)
                        // this.addCateForm是请求体
                    if (res.meta.status !== 201) {
                        return this.$message.error('添加新的分类失败！')
                    }
                    this.$message.success('添加新的分类成功！')
                        //成功了还要刷新列表和隐藏添加的对话框
                    this.getCateList()
                    this.addCateDialogVisible = true
                })
            },
            //监听对话框的关闭事件
            addCateDialogClosed() {
                this.$refs.addCateFormRef.resetFields()
                    //重置选择那么就要把存放的选择的数组清空 还有各种相关参数改为0
                this.addCateForm.cat_level = 0
                this.addCateForm.cat_pid = 0
                this.selectdKeys = []
            }
        }
    }
</script>
<style lang="less" scoped>
    .treeTable {
        margin-top: 15px;
    }
    
    .el-cascader {
        width: 100%;
    }
</style>